<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{common/top :: head}">
    <script th:src="@{/webjars/jquery/jquery.min.js}"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="../css/mystore.css">
</head>
<body>
<div th:replace="~{common/top}"></div>
<section class="xbox">
    <div class="content">
        <form th:action="@{/account/signon}" method="post">
            <p>Please enter your username and password.</p>
            <p th:if="${signOnMsg}" class="error-message">
                <font color="red" th:text="${signOnMsg}"></font>
            </p>
            
            <table class="table">
                <tr>
                    <td>Username:</td>
                    <td><input type="text" name="username" class="search-input" id="username"></td>
                </tr>
                <div id="feedback"></div>
                <tr>
                    <td>Password:</td>
                    <td ><input type="password" name="password" class="search-input" id="password"></td>
                </tr>
                <div id="feed"></div>
                <tr>
                    <td >Verification code:</td>
                    <td>
                        <input type="text" name="code" class="search-input">
                    </td>
                    <td><img th:src="@{/account/captcha}" alt="验证码" onclick="this.src='/account/captcha?d='+new Date().getTime()"></td>

                </tr>
            </table>
            <button type="submit" class="btn" style="margin-top: 20px;">
                Login<i class="fa-solid fa-chevron-right"></i>
            </button>
        </form>
        <p>Need a user name and password?</p>
        <a th:href="@{/account/registerform}">Register Now<i class="fa-solid fa-chevron-right"></i></a>
    </div>
</section>

<div th:replace="~{common/bottom :: footer}"></div>

<script th:inline="javascript">
    $(function() {
        var $code = $("#code_image");
        $code.click(function() {
            this.src = "captcha?" + new Date().getTime();
        });
    });
</script>

</body>
</html> 